<template>
  <h2>自定义事件</h2>
  <form @submit.prevent="handleSubmit">
    <div>
      <label>用户名:</label>
      <input type="text" v-model="userinfo.username">
    </div>
    <div>
      <label>密码:</label>
      <input type="password" v-model="userinfo.password">
    </div>
    <input type="submit">
  </form>
</template>

<script setup>
import { ref } from 'vue'
const userinfo = ref({
  username: '',
  password: '',
})

// 显式地声明事件
const emit = defineEmits([ 'onUserinfo' ])
const handleSubmit = () => {
  // 通过自定义事件将 userinfo 传到 父组件（以供父组件使用）
  // console.log(userinfo.value)
  // 发射事件
  emit('onUserinfo', userinfo)
}
</script>
